import React,{Component,Fragment} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from "react-router-dom";
import { homeActions } from './store'
import Header from '../Header';
import styles from './styles.scss';
import { Pagination } from 'antd'

const { getHomeList,pageList }  = homeActions;

class Home extends Component{
	constructor(props,context){
		super(props,context);
		this.state = {
			hasError:false,
		}
	}
	componentDidMount(){
		this.props.getHomeList();
		this.setState({
			page:this.props.home.page,
			total:this.props.home.toatl
		})
	}

	componentDidCatch(error, info) {
		this.setState({ hasError: true });
		
		// 在这里可以做异常的上报
		console.log('发送错误:',error,info)
	}
	
	getList () {
		const { articleList } = this.props.home;
		return articleList.map((item,key) =>{
			const { tagsData } = item.extra_params;
			return (
				<div key={key} className={styles.item}>
					<div className={styles.wrap}>
						<div className={styles.content}>
							<Link to={"/detail/"+item._id}>
								<h3 className={styles.title}>{item.Title}</h3>
							</Link>
							<div className={styles.tagWrap}>
								{
									tagsData.map((tag,tagKey) => {
										return <a key = {tagKey}>{tag.name}&nbsp;</a>
									})
								}
								<div className={styles.dec}>
									<strong>{item.dec}</strong>
								</div>
							</div>
						</div>
						<div className={styles.divImg}>
							<img alt="logo" className={styles.img} src={item.img}/>
						</div>
					</div>
				</div>
			)
		})
	}
	
	render(){
		return (
			<Fragment>
				<Header/>
				<div className={styles.container}>
					{
						this.getList()
					}
				</div>
				<div className={styles.WrapButton}>
					<Pagination current={this.props.home.page} total={this.props.home.total} hideOnSinglePage={true} pageSize={this.props.home.pageSize} onChange={this.onPageChange}/>
				</div>
			</Fragment>
		)
	}

	onPageChange = (page,row) =>{

		this.props.pageList(page,row)
	}
}

const mapStateToProps=(state)=>({
	home:{...state.home}
});

const mapDispatchToProps=(dispatch)=>bindActionCreators({
	getHomeList: getHomeList,
	pageList:pageList
},dispatch);

export default connect(mapStateToProps,mapDispatchToProps)(Home)
